.vp-preview {
  margin: 0.75rem -0.5rem;
  border: 1px solid var(--preview-c-divider);
  border-radius: var(--preview-border-radius);
}

.vp-preview-showcase {
  overflow: auto;
  padding: 8px 20px;

  @media print {
    page-break-inside: avoid;
  }
}

.vp-preview-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  padding: 0.5rem 1rem;
  border-top: 1px solid var(--preview-c-divider);

  background: var(--preview-c-bg-control);

  font-weight: 500;
  font-size: 0.875em;
  line-height: 1.7;
  white-space: nowrap;

  transition:
    background var(--vp-t-color),
    color var(--vp-t-color);

  .vp-preview:not(.is-expanded) & {
    border-radius: 0 0 var(--preview-border-radius) var(--preview-border-radius);
  }
}

.vp-preview-title {
  flex: 1;

  overflow: hidden;

  padding-inline-end: 1em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-preview-toggle-button {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.825 12.025L8.7 15.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.213-.325T2.426 12t.063-.375t.212-.325l4.6-4.6q.3-.3.713-.3t.712.3t.3.713t-.3.712zm14.35-.05L15.3 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.313t-.3-.712t.3-.713z'/%3E%3C/svg%3E");

  display: inline-block;

  width: 2rem;
  height: 2rem;
  padding: 0.4rem;
  border: none;

  background-color: transparent;
  color: var(--preview-c-button);

  transition: color var(--vp-t-color);

  &:hover {
    color: var(--preview-c-button-hover);
    cursor: pointer;
  }
}

.vp-preview-toggle-icon {
  width: 100%;
  height: 100%;

  background-color: currentcolor;

  mask: var(--icon) no-repeat;
  mask-size: 100% 100%;
}

.vp-preview-code-wrapper {
  overflow: hidden;
  transition: height var(--vp-t-color);

  @media print {
    height: auto !important;
  }
}

.vp-preview-code {
  > div[class*='language-'] {
    margin: 0;
    border-top: solid 1px var(--preview-c-divider);
    border-radius: 0 0 var(--preview-border-radius) var(--preview-border-radius);

    @media (max-width: 419px) {
      margin: 0;

      &.line-numbers-mode::after {
        display: none;
      }

      .line-numbers-wrapper {
        display: none;
      }

      div[class*='language-'] pre {
        padding: 1.25rem 1.25rem 1rem;
      }
    }

    pre {
      margin-block: 0 !important;
    }

    &.line-numbers-mode::after {
      border-radius: 0;
    }
  }
}
